// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div class="navAcitive">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ activeNameTipe: activeCode == index }"
            >
              <a :href="prefixUrl + item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <div class="content-row">
            <div class="ask-info-content">
              <div class="info-head">
                <div class="title">
                  <h1>{{ infoData.content }}</h1>
                  <p>{{ infoData.userName || '✖✖✖✖✖✖✖✖✖✖用户' }}&nbsp;&nbsp;&nbsp;&nbsp;{{ infoData.createdTimeNow?`发布于：${infoData.createdTimeNow}`:'' }}</p>
                </div>
                <div class="head-answer">
                  <el-button type="primary" @click="popupproblem.show = true">我要回答</el-button>
                </div>
              </div>
              <div class="info-desc">全部{{ infoData.aNum || 0 }}个回答</div>
              <div class="info-list">
                <ul>
                  <li class="list" v-for="(item, index) in listData" :key="index">
                    <div class="acontent-row">
                      <div class="acontent">
                        <el-image
                          class="avatar"
                          :src="item.userImg||'https://v2static.cdn.pulizu.com/defaultAvatar.png'"
                          :alt="item.userName"
                        ></el-image>
                        <span class="author">{{ item.userName || "✖✖✖✖✖✖✖✖✖✖用户" }}</span>
                        <el-button class="label" v-show="item.zzName">
                          {{
                          item.zzName
                          }}
                        </el-button>
                      </div>
                      <div class="desc">{{ item.aContent || "" }}</div>
                      <p class="time">{{ item.createdTimeNow?`发布于：${item.createdTimeNow}`:'' }}</p>
                    </div>
                    <el-button
                      class="assist-btn"
                      :class="item.checked ? 'active' : ''"
                      round
                      @click="assistBtn(item.id)"
                      :disabled="item.checked"
                    >有用</el-button>
                  </li>
                </ul>
              </div>
              <div class="info-more">
                <el-button
                  class="info-more-a"
                  @click="moreBtn"
                  :disabled="moreDisabled"
                >{{ moreText }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关键区域，街道，周边 -->
      <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 回答弹窗 -->
    <PopupProblem
      :show="popupproblem.show"
      :title="popupproblem.title"
      :content="popupproblem.content"
      :author="popupproblem.author"
      :ctime="popupproblem.ctime"
      :placeholder="popupproblem.placeholder"
      :confirmText="popupproblem.confirmText"
      :disabled="popupproblem.disabled"
      :textareaValue="popupproblem.textareaValue"
      @close="popupproblem.show = false"
      @confirm="popupproblemConfirm"
    ></PopupProblem>
    <!-- 回答成功弹窗 -->
    <PopupProblemSuccess
      :show="popup.show"
      :cover="popup.cover"
      :title="popup.title"
      :desc="popup.desc"
      :confirmText="popup.confirmText"
      @confirm="
        popup.show = false;
        popupproblem.disabled = false;
      "
    ></PopupProblemSuccess>
  </div>
</template>

<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/lpgk.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      activeCode: 7, //选项卡切换
      textareaValue: '',
      popup: {
        show: false,
        cover:
          'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20210907/8b2e500aa48e4a29abbc68cd53059a7f.png',
        title: '提交成功',
        desc: '您的问题已提交后台审核',
        confirmText: '确认',
      },
      moreDisabled: false,
      moreText: '加载更多',
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var prefixUrl = ctx.prefixUrl
    var cityCode = ctx.cityCode
    var crumbListData = []
    var id = ctx.params.id ? ctx.params.id.split('.')[0] : ''
    var infoData = null
    var pageNum = 1
    var pageSize = 10
    var total = 1
    var listData = []
    var answerId = ctx.query.id //楼盘问题ID
    var popupproblem = {
      show: false,
      title: '有问必答',
      content: '',
      author: '',
      ctime: '',
      placeholder: '在这里输入您回答的内容（必填）',
      confirmText: '提交答案',
      textareaValue: '',
    }
    // 获取问题详情
    var getInfoData = await u.http({
      url: '/app/houseInfoQa/queryHouseInfoQaById',
      params: {
        id: answerId,
      },
    })
    if (getInfoData.code == 200) {
      if (getInfoData.data.createdTime) {
        getInfoData.data.createdTimeNow = u.formatTime(
          getInfoData.data.createdTime,
          'Y-m-d H:i:s'
        )
      }
      infoData = getInfoData.data
      // 202204141742 sry
      infoData.content =
        infoData.content.search(infoData.houseName) == -1
          ? infoData.houseName + infoData.content
          : infoData.content
      popupproblem.content = infoData.content
      popupproblem.userName = infoData.userName
      popupproblem.ctime = infoData.createdTimeNow
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }
    // 获取回答列表
    var getListData = await u.http({
      url: '/app/houseInfoQaA/queryHouseQaAList',
      params: {
        pageNum,
        pageSize,
        id: answerId,
      },
    })
    if (getListData.code == 200) {
      total = Math.ceil(getListData.data.total / pageSize)
      getListData.data.list.forEach((item) => {
        item.checked = false
        item.createdTimeNow = u.formatTime(item.createdTime, 'Y-m-d H:i:s')
      })
      listData = getListData.data.list
    }

    var tabList = [
      {
        name: '楼盘首页',
        href: `/lpxq/${id}.html`,
        aliases: '',
      },
      {
        name: '基础信息',
        href: `/lpxqxx/${id}.html`,
      },
      {
        name: '楼盘相册',
        href: `/lpxqxc/${id}.html`,
      },
      {
        name: '楼盘户型',
        href: `/lpxqhx/${id}.html`,
      },
      {
        name: '楼盘动态',
        href: `/lpxqdt/${id}.html`,
      },
      {
        name: '周边配套',
        href: `/lpxqpt/${id}.html`,
      },
      {
        name: '房价走势',
        href: `/lpxqzs/${id}.html`,
      },
      {
        name: '你问我答',
        href: `/lpxqwd/${id}.html`,
        aliases: 'wenda',
      },
      {
        name: '免费专车',
        href: `/mfzc/${id}.html`,
      },
    ]

    // 修改SEO
    head.title = `${infoData.content} - ${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖你问我答`
    head.keywords = infoData.content
    head.content = `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖问答频道，为您解答：${infoData.content}，${infoData.aContent}`
    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: `${infoData.houseName}`,
        href: `${prefixUrl}/lpxq/${id}.html`,
      },
      {
        title: '你问我答',
        href: prefixUrl + ctx.route.fullPath,
      },
    ]

    return {
      currentCity,
      cityList,
      prefixUrl,
      cityCode,
      crumbListData,
      tabList,
      id,
      infoData,
      pageNum,
      pageSize,
      total,
      listData,
      popupproblem,
      answerId, //问题ID
      regionList: ctx.regionList
    }
  },

  mounted() {},
  methods: {
    // 点赞按钮
    assistBtn(id) {
      if (!localStorage.getItem('userInfo')) {
        setTimeout((e) => {
          document.querySelector('#login').click()
        }, 300)
        return false
      }
      this.listData.forEach((item) => {
        if (item.id == id) {
          item.checked = true
        }
      })
      this.saveAssist(id)
    },
    // 提交点赞
    saveAssist(id) {
      u.http({
        client: true,
        url: '/app/houseInfoQaA/addHouseQaACNum',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          id,
        },
      }).then()
    },
    // 回答问题按钮
    popupproblemConfirm(e) {
      this.textareaValue = e
      var nowE = e.replace(new RegExp(/\s/, 'g'), '')
      if (nowE == '') {
        this.$message({
          message: '请输入您回答的内容',
          type: 'warning',
        })
        return false
      }
      if (!localStorage.getItem('userInfo')) {
        setTimeout((e) => {
          document.querySelector('#login').click()
        }, 300)
        return false
      }
      this.save()
    },
    // 提交
    save() {
      this.popupproblem.disabled = true
      this.popupproblem.show = false
      u.http({
        client: true,
        url: '/app/houseInfoQaA/addHouseInfoQaA',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          qaId: this.answerId,
          aContent: this.textareaValue,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.popupproblem.textareaValue = ''
          setTimeout((e) => {
            this.popup.show = true
          }, 300)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
    },
    // 加载更多
    moreBtn() {
      if (this.pageNum >= this.total) {
        this.moreText = '没有数据了'
        return false
      }
      this.pageNum++
      this.getListData()
    },
    // 获取回答列表
    getListData() {
      this.moreDisabled = true
      u.http({
        client: true,
        url: '/app/houseInfoQaA/queryHouseQaAList',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: this.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            item.checked = false
            item.createdTimeNow = u.formatTime(item.createdTime, 'Y-m-d H:i:s')
          })
          this.listData = [...this.listData, ...res.data.list]
          setTimeout((e) => {
            this.moreDisabled = false
          }, 500)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
        setTimeout((e) => {
          this.moreDisabled = false
        }, 500)
      })
    },
  },
}
</script>
<style>
/* .activeNameTipe {
  background: #ff9800 !important;
  color: #fff !important;
  border-radius: 4px;
} */
</style>